<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option"/>
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import TargetTypeEnum from '@/feature/mms/infra/constants/TargetTypeEnum'
import {noticeApi} from '@/feature/mms/infra/api/noticeApi'
import CURDTable from '@/framework/components/table/CURDTable'
import {roleApi} from "@/feature/mgr/infra/api/roleApi";
import {adminApi} from "@/feature/mgr/infra/api/adminApi";

export default {
  components: {CURDTable},
  data() {
    return {
      option: {
        requestApi: noticeApi,
        requestApiNames: {
          list: 'page'
        },
        showSelection: false,
        columns: [
          {
            label: '通知目标类型',
            prop: 'targetType',
            searchable: true,
            span: 24,
            required: true,
            type: ColumnType.RADIO,
            options: TargetTypeEnum
          },
          {
            label: '角色',
            hiddenInTable: true,
            prop: 'targetRoleIdList',
            span: 24,
            showFilter: ({value}) => value.targetType === TargetTypeEnum.ROLE.id,
            required: true,
            type: ColumnType.SELECT,
            renderOptions: {multiple: true},
            options: roleApi.listAll()
          }, {
            label: '通知用户',
            prop: 'targetUserIdList',
            hiddenInTable: true,
            renderOptions: {
              // placeholder: '多个ID逗号隔开',
              // maxlength: 128
              multiple: true
            },
            options: adminApi.listAll(),
            span: 24,
            showFilter: ({value}) => value.targetType === TargetTypeEnum.PERSON.id,
            required: true,
            type: ColumnType.SELECT
          },
          {
            label: '标题',
            searchable: true,
            span: 24,
            required: true,
            prop: 'title',
            renderOptions: {
              maxlength: 64
            }
          },
          {
            label: '描述',
            prop: 'intro',
            width: 'auto',
            span: 24,
            required: true,
            type: ColumnType.TEXTAREA,
            renderOptions: {
              maxlength: 255
            }
          },
          // {
          //   label: '内容',
          //   prop: 'content',
          //   hiddenInTable: true,
          //   width: 'auto',
          //   span: 24,
          //   viewDetail: true,
          //   type: ColumnType.RICH_EDITOR
          // },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    }
  },
  methods: {}
}
</script>

